import { nextTick } from "vue";
import { useMenuStore } from "../store";
//权限检查方法
const checkPermission = (value: any) => {
  const { role } = useMenuStore();
  let isExist = false;
  const buttonArr = role.getv() as any;
  //判断是否按钮有权限
  if (buttonArr.includes(value)) {
    isExist = true;
  }
  return isExist;
};


const DISTANCE = 100 //定义动画的距离
const duration = 500 //定义动画的持续时间 //也可以接收用户的一些配置

const animationMap = new WeakMap() // 记录元素和动画的对应关系 WeakMap房防止内存泄漏

const ob = new IntersectionObserver((entries) => {
  //创建一个监听者，监听元素啊是否进入可视区域
  for (const entry of entries) {
    //遍历监听者
    if (entry.isIntersecting) {
      //如果元素进入可视区域
      const animation = animationMap.get(entry.target)
      if (animation) {
        // console.log(animation)
        animation.play()
        ob.unobserve(entry.target) //动画播放完毕后取消监听
      }
      // console.log(entry.target)
    }
  }
})
/**
 * 判断元素是否在可视区域之下
 * @param {Element} el - 要判断的元素
 * @returns {boolean} - 若元素在可视区域之上则返回true，否则返回false
 */
const isBelowViewport = (el: any) => {
  const rect = el.getBoundingClientRect()
  console.log(rect.top - DISTANCE, window.innerHeight, '22')
  return rect.top - DISTANCE > window.innerHeight
}

export const v = [
  {
    name: "highlight",
    directive: {
      beforeMount(el: any, binding: any) {
        el.style.color = binding.value;
      },
    },
  },
  {
    name: "hasPermiss",
    directive: {

      async beforeMount(el: any, binding: any) {
        await nextTick();
        const res = checkPermission(binding.value);
        !res && el.parentNode.removeChild(el);
      },

    },
  },
  {
    name: "striping",
    directive: {
      beforeMount(el: any) {
        const stripLeft = document.createElement("div");
        const stripRight = document.createElement("div");
        stripLeft.style.position = "absolute";
        stripLeft.style.width = "9.89vw";
        stripLeft.style.height = "1px";
        stripLeft.style.backgroundColor = "#737e91";
        stripLeft.style.left = "35%";
        stripLeft.style.top = "50%";
        stripLeft.style.transform = "translate(-35%, -50%)";
        stripRight.style.position = "absolute";
        stripRight.style.width = "9.89vw";
        stripRight.style.height = "1px";
        stripRight.style.backgroundColor = "#737e91";
        stripRight.style.right = "35%";
        stripRight.style.top = "50%";
        stripRight.style.transform = "translate(35%, -50%)";
        el.appendChild(stripLeft);
        el.appendChild(stripRight);
      },

    },
  },
  {
    name: "autofocus",
    directive: {
      mounted(el: any) {
        el && el.focus()
      },

    },
  },
  {
    name: "color",
    directive: {
      mounted(el: any, binding: any) {
        el.style.backgroundColor = binding.value
      },
      updated(el: any, binding: any) {
        el.style.backgroundColor = binding.value
      },
    },
  },
  {
    name: 'slide',
    directive: {
      mounted(el: any) {
        if (!isBelowViewport(el)) {
          //判断元素是否在可视区域之下
          return //如果不在可视区域之下则直接返回   //  因为动画只需要在元素进入可视区域时才播放，所以只需要在元素进入可视区域时调用mounted方法即可 视口内容和视口之上的元素都不需要播放动画
        }
        const animation = el.animate(
          [
            {
              transform: `translateY(${DISTANCE}px)`,
              opacity: 0.3
            },
            {
              transform: `translateY(0)`,
              opacity: 1
            }
          ],
          {
            duration: duration,
            easing: 'ease-in'
          }
        )
        //创建动画用   animate(keyframes, options)，animate方法返回一个Animation实例，可以调用play()方法来播放动画，调用pause()方法来暂停动画
        animation.pause() //创建动画后先将所有动画暂停
        ob.observe(el) //监听元素是否进入可视区域，如果进入就播放动画，如果不进入就暂停动画
        animationMap.set(el, animation) //将元素和动画的对应关系记录在WeakMap中
      },
      unmounted(el: any) {
        ob.unobserve(el)
      }
    }
  }
];
